CSS Text Shadow Mouse Move Effect 滑鼠操作文字陰影

監聽滑鼠的移動行為，去根據坐標位置，移動text-shadow，讓你眼花撩亂的效果就此誕生，眼睛好痛

個人codepen

技巧點

1. 物件解構賦值

• 可以把陣列或物件中的資料解開擷取成為獨立變數。利用這樣的方式可以輕鬆的命名變數和取得資料

// 土法煉鋼的方式，命名好多次變數跟賦值
const array = [1, 2, 3];
const a = array[0];
const b = array[1];
const c = array[2];
console.log(a, b, c); // 1 2 3

// 解構方式，根據位置一個一個對應
const [a, b ,c] = array;
console.log(a, b, c); // 1 2 3

// 希望a變數為1，b變數的部分則是剩下的數字2.3放一起的陣列
const array = [1, 2, 3];
const [a, ...b] = array;
console.log(a, b); 1, [2,3];

• 物件的方式也是一樣操作

// window是一個物件，裡面有很多屬性，我就可以根據裡面有的屬性直接解構，左邊解構的名稱要跟右邊物件裡面有的屬性搭配上，不然就會變成undefined
const { innerWidth, innerHeight } = window;
console.log(innerWidth, innerHeight);

// 錯誤示範
const { width, height } = window;
console.log(width, height);

// 如果你想要自己取變數名字也可以，左側的屬性名稱後面加上冒號和想命名的變數名
const { innerWidth: oo, innerHeight: xx } = window;
console.log(oo, xx);

2. offsetX、offsetY

• 可以得到一個座標，相對於這個元素容器的左上角開始的xy軸
• 底下圖片紅色邊框內是我元素容器的大小，左上角的left-top座標就會是offsetX:0,offsetY:0，右下角的位置right-bottom的座標就是容器的寬和高了
  

3. getBoundingClientRect()

• 會返回一個物件，裡面包含了此元素的大小尺寸和相對於視窗口的相對位置資訊
• 舉例我要取得底下IT ironMan的getBoundingClientRect

// rect就會得到一個此元素相關資料
const rect = ironMan.getBoundingClientRect();

心得

當滑鼠移動到左上，陰影就要跟到左上，滑鼠到右上角，陰影就要到右上角，為了計算陰影該怎麼移動，想了好久，發現原來不擅長的是數學啊ＱＱ

另外要注意的點，當滑鼠移動到標題內的時候，offsetX、offsetY的座標會變成在這個容器內移動，所以要特別去判斷在標題內的時候，xy要重新計算